<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>商品规格一览</title>
  <th:block th:include="common.html :: source"></th:block>
  <link href="/static/layui/css/layui.css" rel="stylesheet">
</head>
<style>
  body{
    margin: 20px;
  }
  .panel-head {
    background-color: #fcfcfc;
    padding: 10px 15px;
    border-radius: 4px 4px 0 0;
    border-bottom: solid 4px #c2c2c2;
  }
</style>
<body>
<div style="" class="panel-head layui-anim layui-anim-down"><strong> 商品信息</strong></div>
<table class="layui-hide" id="test" lay-filter="test" style="margin-bottom: 100px"></table>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
  </div>
</script>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="/layui/layui.js" charset="UTF-8"></script>
<script th:inline="none">
  layui.use(['table', 'laypage', 'form'], function(){
    var table = layui.table;
    table.render({
      elem: '#test'
      ,url:'/manage/specsInfo'
      , cellMinWidth: 80
      ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
        title: '提示'
        ,layEvent: 'LAYTABLE_TIPS'
        ,icon: 'layui-icon-tips'
      }]
      , parseData: function (data) {
        return {
          code: data.code,
          msg: data.msg,
          data: data.data,
          count: data.count
        }
      }
      ,page: true
      , limit: 8
      , limits: [8, 16, 24, 32]
      ,width: 1200
      ,title: '商品规格数据表'
      ,cols: [[
        {type: 'checkbox',fixed: 'left',width: 50}
        ,{field:'specsId',fixed: 'left', title:'规格编号', width:120 ,align: 'center', sort: true}
        ,{field:'specsNameColor', title:'颜色',align: 'center', width:150}
        ,{field:'specsNameSize', title:'尺码',align: 'center', width:150}
        ,{field:'specsStock', title:'库存',align: 'center', width:100}
        ,{field:'specsPrice', title:'规格价格(/分)',align: 'center', width:150, sort: true}
        ,{field:'shoeId', title:'商品编号',align: 'center', width:100,sort: true}
        ,{field:'categoryType', title:'商家类型',align: 'center', width:100}
        ,{field:'updateTime', title:'最近修改',align: 'center', width:120,  templet:'<div>{{ layui.util.toDateString(d.updateTime.date, \'yyyy-MM-dd\') }}</div>'}
        ,{field:'createTime', title:'创建时间',align: 'center', width:120,  templet:'<div>{{ layui.util.toDateString(d.createTime.date, \'yyyy-MM-dd\') }}</div>'}
        ,{fixed: 'right', title:'操作',align: 'center', toolbar: '#barDemo', width:170}
      ]]

      ,done: function(res, curr, count){
        $(".layui-table-main tr").each(function (index, val) {
          $($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
          $($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
        })
      }
    });

    //头工具栏事件
    table.on('toolbar(test)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case 'getCheckData':
          var data = checkStatus.data;
          layer.alert(JSON.stringify(data));
          break;
        case 'getCheckLength':
          var data = checkStatus.data;
          layer.msg('选中了：'+ data.length + ' 个');
          break;
        case 'isAll':
          layer.msg(checkStatus.isAll ? '全选': '未全选');
          break;
        case 'add':
          layer.open({
            type: 2
            , title: "添加成员信息"
            , area: ['45%', '78%']
            , content: '/manage/toSaveSpecsInfo',
            success: function (layero, index) {
              var body = layer.getChildFrame('body', index);
              var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象
              //成员的职位回显
              $.post({
                url: "/manage/SpecsInfo",
                success: function (resp) {
                  iframeWin.layui.form.render("select");
                }
              })
            }
          });
          break;

              //自定义头工具栏右侧图标 - 提示
        case 'LAYTABLE_TIPS':
          layer.alert('这是工具栏右侧自定义的一个图标按钮');
          break;
      };
    });

    //监听行工具事件
    table.on('tool(test)', function(obj){
      var data = obj.data;
      //console.log(obj)
      if(obj.event === 'del'){
        layer.confirm('真的删除么',
                {
                  offset: '200px'
                },
                function(index){
                  $.post({
                    url: "/manage/delSpecsInfo",
                    data: {
                      "id": data.specsId,
                    },
                    success: function (resp) {
                      if (resp === "true") {
                        // obj.del();
                        layer.close(index);
                        location.reload();
                      } else {
                        layer.close(index);
                        layer.open({
                          title: '温馨提示',
                          content: '删除失败,请重试！'
                        });
                      }
                    }
                  })
                });
      } else if(obj.event === 'edit'){
        layer.open({
          type: 2
          , title: "修改信息"
          , area: ['45%', '78%']
          , content: '/manage/toUpdateSpecsInfo',
          success: function (layero, index) {
            var body = layer.getChildFrame('body', index);
            var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象
            body.find('#specsId').val(data.specsId);
            body.find('#specsIdColor').val(data.specsIdColor);
            body.find('#specsIdSize').val(data.specsIdSize);
            body.find('#specsNameSize').val(data.specsNameSize);
            body.find('#specsNameColor').val(data.specsNameColor);
            body.find('#specsStock').val(data.specsStock);
            body.find('#specsPrice').val(data.specsPrice);
            body.find('#shoeId').val(data.shoeId);
            body.find('#categoryType').val(data.categoryType);
            body.find('#createTime').val(data.createTime);
            body.find('#updateTime').val(data.updateTime);

            $.post({
              url: "/manage/SpecsInfo",
              success: function (resp) {

                iframeWin.layui.form.render("select");
              }
            })
          }
        })
      }else if(obj.event === 'detail'){
        layer.open({
          title: '信息',
          area: ['30%', '70%'],
          offset: 'auto',
          content: 'ID: ' + data.specsId + '</br>'
                  + '颜色: ' + data.specsNameColor + '</br>'
                  + '尺码: ' + data.specsNameSize + '</br>'
                  + '库存: ' + data.specsStock + '</br>'
                  + '规格价格: ' + data.specsPrice + '</br>'
                  + '商品编号: ' + data.shoeId + '</br>'
                  + '商家类型: ' + data.categoryType + '</br>'
                  + '加盟时间: ' + data.createTime + '</br>'
                  + '更新时间: ' + data.updateTime + '</br>'
        })
      }

    });
  });
</script>

</body>
</html>